<!-- =========================================================================================
    File Name: VxSidebarItem.vue
    Description: Sidebar item component. Extends vuesax framework's 'vs-sidebar-item' component
========================================================================================== -->

<template>
  <div
    :class="[{'vs-sidebar-item-active':activeLink}, {'disabled-item pointer-events-none': isDisabled}]"
    class="vs-sidebar--item"
    v-if="canSee"
    @click="handleClick"
  >
    <a
      v-if="to"
      @click="goto(to)"
      :class="[{'router-link-active': path == to}]"
      :target="target"
      exact
    >
      <vs-icon v-if="!featherIcon" :icon-pack="iconPack" :icon="icon"></vs-icon>
      <feather-icon :icon="icon" :class="{'w-3 h-3': iconSmall}" v-else></feather-icon>
      <slot></slot>
    </a>
    <a v-else :target="target" :href="href">
      <vs-icon v-if="!featherIcon" :icon-pack="iconPack" :icon="icon"></vs-icon>
      <feather-icon :icon="icon" :class="{'w-3 h-3': iconSmall}" v-else></feather-icon>
      <slot></slot>
    </a>
  </div>
</template>

<script>
export default {
  name: "VxSidebarItem",
  props: {
    icon: {
      default: "",
      type: String
    },
    iconSmall: {
      default: false,
      type: Boolean
    },
    iconPack: {
      default: "material-icons",
      type: String
    },
    href: {
      default: "#",
      type: String
    },
    to: {
      default: null,
      type: String
    },
    index: {
      default: null,
      type: [String, Number]
    },
    featherIcon: {
      default: true,
      type: Boolean
    },
    target: {
      default: "_self",
      type: String
    },
    isDisabled: {
      default: false,
      type: Boolean
    },
    targetName: {
      default: null,
      type: String
    }
  },
  data() {
    return {
      activeLink: false,
      path:""
    };
  },
  watch: {
    $route(val) {
      if (
        val.path.includes("/hardware/model-manage/Model") &&
        this.to == "/hardware/model-manage/Model"
      ) {
        this.activeLink = true;
      } else {
        this.CheckIsActive();
      }
    },
     $route: {
      handler: function(route) {
        console.log("路由信息",route.path)
        this.path = route.path;
      },
      immediate: true
    }
  },
  methods: {

    CheckIsActive() {
      if (this.to) {
        if (this.to == this.$route.path && this.to) this.activeLink = true;
        else if (this.$route.meta.parent && this.$route.meta.parent.indexOf(this.to) > -1 ) {
          this.activeLink = true;
        }
        else this.activeLink = false;
        // if (this.$route.path.slice(1).includes(this.to.slice(1)) && this.to.slice(1)) this.activeLink = true
        // else this.activeLink = false
      }
    },
    handleClick() {
      let urlArr = [];
      for (let i of this.$store.state.cacheRoute) {
        urlArr.push(i.url);
      }
      if (this.to && !urlArr.includes(this.to)) {
        this.$store.dispatch("addCacheRoute", {
          name: this.targetName,
          url: this.to
        });
      }
    },
    goto(to){
      // 判断路由跳转还是大屏调转
      console.log(to)
      var str=new RegExp("http");
      if(str.test(to)){
        window.open(to);
      }else{
        this.$router.push(to)
      }
    }
  },
  computed: {
    canSee() {
      this.$acl.check(this.$store.state.userRole);
      if (this.to) {
        return this.$acl.check(this.$router.match(this.to).meta.rule);
      }
      return true;
    }
  },
  updated() {
    // this.CheckIsActive();
  }
};
</script>
